<template>
  <div>
    <el-dialog :visible.sync="dialogShow" title="高管信息"  :before-close="handleClose">
      <div style="height:500px;overflow-x:hidden;"  v-loading="seniorLoading" >
        <div class="dialog_input" v-for="(item, index) in seniorExecutiveVoList" :key="index">
          <el-row :gutter="20" class="mg-bottom-10">
            <el-col :span="10">
              <div class="align-center">
                <div style="flex:1;text-align:right;">姓名：</div>
                <el-input style="flex:2" v-model="item.name"></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div  class="align-center">
                <div  style="flex:1; text-align:center">职位：</div>
                <el-input style="flex:2" v-model="item.position"></el-input>
              </div>
            </el-col>

            <el-col :span="1" v-if="item.id">
              <div  @click="delSenior(item.id)" class="pointer" >
                <i class="el-icon-delete" ></i>
              </div>
            </el-col>
            <el-col :span="1" v-if="item.id" >
              <div  @click="upSenior(item.id, index)"  class="pointer">
                <i class="el-icon-edit" ></i>
              </div>
            </el-col>
            <el-col :span="2" v-else>
              <el-button size="mini" type="success"  @click="addSenior(index)" >确认</el-button>
            </el-col>
          </el-row>
        </div>
        <el-button @click="addItem(seniorExecutiveVoList)" class="mg-left-40">添加</el-button>
        <el-button @click="getSeniorList()" type="warning">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    findSeniorExecutivePageByQualityInspection,
    delSeniorExecutiveById,
    updateSeniorExecutive,
    addSeniorExecutive
  } from '../api'
  export default {
    props: {
      dialogShow: { type: Boolean, required: true, default: false },
      enterpriseId: {type: String},
    },
    data() {
      return {
        seniorExecutiveVoList: [],
        seniorLoading: true,
      }
    },
    mounted(){
      this.getSeniorList()
    },
    methods: {
      handleClose() {
        this.$emit('update:dialogShow', false)
      },
      // 获取当前高管信息
      getSeniorList(){
        this.seniorLoading = true
        findSeniorExecutivePageByQualityInspection().then(response => {
          this.seniorExecutiveVoList = response
          this.seniorLoading = false
        })
      },
      // 删除对应高管
      delSenior(id){
        this.$confirm('确定删除该高管信息？', '提示', {
          confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
        }).then(() => {
          delSeniorExecutiveById({SeniorExecutiveId: id}).then(response => {
            if(response){
              this.$message({ type: 'success',message: '删除成功!' })
            }else{
              this.$message({ type: 'error',message: '删除失败!' })
            }
            this.getSeniorList()
          })
        }).catch(() => {})
      },
      // 添加新的高管信息
      addSenior(index){
        if(!this.seniorExecutiveVoList[index].name || !this.seniorExecutiveVoList[index].position){
          this.$message({ type: 'warning',message: '名字和职位缺一不可!' })
          return
        }
        const addData = {
          enterpriseId: this.enterpriseId,
          name: this.seniorExecutiveVoList[index].name,
          position: this.seniorExecutiveVoList[index].position
        }
        addSeniorExecutive(addData).then(response => {
          if(response){
            this.$message({ type: 'success',message: '添加成功!' })
          }else{
            this.$message({ type: 'error',message: '修改失败' })
          }
          this.getSeniorList()
        })
        console.log(this.seniorExecutiveVoList[index])
      },
      // 修改对应高管
      upSenior(id, index){
        if(!this.seniorExecutiveVoList[index].name || !this.seniorExecutiveVoList[index].position){
          this.$message({ type: 'warning',message: '名字和职位缺一不可!' })
          return
        }
        const upData = {
          id: id,
          name: this.seniorExecutiveVoList[index].name,
          position: this.seniorExecutiveVoList[index].position
        }
        updateSeniorExecutive(upData).then(response => {
          if(response){
            this.$message({ type: 'success',message: '修改成功!' })
          }else{
            this.$message({ type: 'error',message: '修改失败' })
          }
          this.getSeniorList()
        })
      },
       // 添加INPUT输入框
      addItem (val) {
        val.push({ name: '', position: '' })  
      },
    }
  }
</script>
<style lang="scss" scoped>
::v-deep .dialog_input{
  .el-input{
    .el-input__inner{
        width: vw(260px);
    }
  }
}
.pointer{ cursor: pointer; }
</style>

